<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.title" size="medium" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />

      <el-button v-waves class="filter-item" type="primary" size="medium" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="medium" icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>

      <div class="block">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>{{ data.url }}</span>
        <span>{{ data.order }}</span>
        <span>{{ data.description }}</span>
        <span>{{ data.create_time }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => updateItem(data)">
            修改
          </el-button>
          <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除吗？" @onConfirm="() => delConfirm(data)">
            <el-button slot="reference" type="text" icon="el-icon-delete" size="mini"></el-button>
          </el-popconfirm>
        </span>
      </span>
        </el-tree>
      </div>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
        <el-form-item label="菜单名" prop="display_name">
          <el-input v-model="temp.display_name" />
        </el-form-item>
        <el-form-item label="父级" prop="parent_id">
          <el-select v-model="temp.parent_id" class="filter-item" placeholder="选择上级">
            <el-option v-for="item in list" :key="item.id" :label="item.display_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限" prop="system_permission_id">
<!--          <el-select v-model="temp.system_permission_id" placeholder="选择" clearable>-->
<!--            <el-option-group-->
<!--              v-for="group in permissionList"-->
<!--              :key="group.id"-->
<!--              :label="group.display_name"-->
<!--              @change="changeUri">-->
<!--              <el-option-->
<!--                v-for="item in group.children"-->
<!--                :key="item.id"-->
<!--                :label="item.display_name"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-option-group>-->
<!--          </el-select>-->

          <el-cascader
            v-model="temp.system_permission_id"
            :options="permissionList"
            :props="props"
            placeholder="选择权限"
            @change="changeParent"
            clearable ></el-cascader>
        </el-form-item>
        <el-form-item label="路由" prop="url">
          <el-input v-model="temp.url">
            <template slot="prepend">@</template>
          </el-input>
        </el-form-item>
        <el-form-item label="附加字段" prop="additional">
          <el-input v-model="temp.additional" />
        </el-form-item>
        <el-form-item label="菜单icon" prop="icon">
          <el-input v-model="temp.icon" style="width: 150px;" />
          <el-button type="primary" icon="el-icon-picture-outline-round" circle @click="chooseIcon"></el-button>
        </el-form-item>
        <el-form-item label="排序" prop="order">
          <el-input v-model="temp.order" />
        </el-form-item>
        <el-form-item label="菜单描述" prop="description">
          <el-input v-model="temp.description" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="菜单描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="图标" :visible.sync="dialogIconVisible">
      <el-tabs type="border-card">
        <el-tab-pane label="Icons">
          <div class="grid">
            <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
              <el-tooltip placement="top">
                <div slot="content">
                  {{ generateIconCode(item) }}
                </div>
                <div class="icon-item">
                  <svg-icon :icon-class="item" class-name="disabled" />
                </div>
              </el-tooltip>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Element-UI Icons">
          <div class="grid">
            <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
              <el-tooltip placement="top">
                <div slot="content">
                  {{ generateElementIconCode(item) }}
                </div>
                <div class="icon-item">
                  <i :class="'el-icon-' + item" />
                </div>
              </el-tooltip>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { getList, createMenu, updateMenu, delMenu, getMenuTreeList } from '@/api/menu'
import waves from '@/directive/waves' // waves directive
import { getPermissionList } from '@/api/permission'
import svgIcons from './svg-icons'
import elementIcons from './element-icons'
export default {
  name: 'Menu',
  directives: { waves },
  data() {
    return {
      svgIcons,
      elementIcons,
      list: null,
      listLoading: true,
      permissionList: null,
      listQuery: {
        title: ''
      },
      temp: {
        id: undefined,
        system_permission_id: 0,
        parent_id: 0,
        url: '',
        additional: '',
        icon: '',
        order: 99,
        description: '',
        display_name: ''
      },
      dialogFormVisible: false,
      dialogIconVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        display_name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        // system_permission_id: [{ required: true, message: '请选择路由', trigger: 'change' }],
        icon: [{ required: true, message: '请选择图标', trigger: 'blur' }],
        url: [{ required: true, message: '请选输入路由', trigger: 'blur' }]
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'display_name'
      },
      props: {
        value: 'id',
        label: 'display_name',
        children: 'children',
        checkStrictly: true
      }
    }
  },
  created() {
    this.getList()
    this.getTreeList()
    this.getPermissionList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.data = response.data.row
      })
    },
    getTreeList() {
      this.listLoading = true
      getMenuTreeList(this.listQuery).then(response => {
        this.list = response.data.row
      })
    },
    getPermissionList() {
      getPermissionList().then(response => {
        this.permissionList = response.data.row
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetTemp(parent_id = 0) {
      this.temp = {
        id: undefined,
        parent_id: parent_id,
        url: '',
        system_permission_id: 0,
        additional: '',
        icon: '',
        order: 99,
        description: '',
        display_name: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      console.log(this.temp)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createMenu(this.temp).then(() => {
            this.dialogFormVisible = false
            this.getList()
          })
        }
      })
    },
    updateData() {
      console.log(this.temp)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateMenu(this.temp).then(() => {
            this.dialogFormVisible = false
            this.getList()
          })
        }
      })
    },
    changeUri(value) {
      console.log('选择的值')
      console.log(value)
    },
    // 添加下级
    append(data) {
      this.resetTemp(data.id)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateItem(data) {
      console.log(data)
      this.temp = {
        id: data.id,
        parent_id: data.parent_id,
        url: data.url,
        system_permission_id: data.system_permission_id,
        additional: data.additional,
        icon: data.icon,
        order: data.order,
        description: data.description,
        display_name: data.display_name
      }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    handleNodeClick(data) {},
    delConfirm(data) {
      delMenu(data.id).then(() => {
        this.getList()
      })
    },
    // 图标
    generateIconCode(symbol) {
      return symbol
    },
    generateElementIconCode(symbol) {
      return 'el-icon-' + symbol
    },
    handleClipboard(text, event) {
      this.temp.icon = text
      this.dialogIconVisible = false
    },
    chooseIcon() {
      this.dialogIconVisible = true
    },
    closeDialog() {
      this.resetTemp()
    },
    changeParent(value) {
      this.temp.system_permission_id = value[value.length - 1]
    }
  }
}
</script>

<style scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;
}
.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

.icon-item {
  margin: 10px;
  text-align: center;
  float: left;
  color: #24292e;
  cursor: pointer;
}

.disabled {
  pointer-events: none;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
